<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :model="form" inline>
        <el-form-item label="部门:">
          <el-select v-model="form.deptId" placeholder="" clearable>
            <el-option
              v-for="item in departmentSelects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间段:">
          <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="daterange" placeholder=""></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="table-container" v-loading="loading">
        <div class="title">能力调用次数、排名情况</div>
        <el-table :data="tableData" height="288px">
          <el-table-column label="能力名称" align="center" prop="name"></el-table-column>
          <el-table-column label="调用次数" align="center" prop="count"></el-table-column>
          <el-table-column label="调用排名" align="center" prop="rank"></el-table-column>
        </el-table>
        <div class="page-con">
          <el-pagination :total="total" :current-page="page" :page-size="limit" @current-change="currentChange" layout="prev, pager, next"></el-pagination>
        </div>
      </div>
    </div>
    <div class="cl">
      <div class="chart-part">
        <bar-chart
          :option="barOption"
          :hasClick="true"
          @barChange="barChange"
        />
      </div>
      <div class="chart-part">
        <div class="btn-container">
          <el-button
            :class="['btn', { 'btn-active': activeIndex === 0 }]"
            size="mini"
            @click="switchData(0)"
            >日统计</el-button
          >
          <el-button
            :class="['btn', { 'btn-active': activeIndex === 1 }]"
            size="mini"
            @click="switchData(1)"
            >月统计</el-button
          >
          <el-button
            :class="['btn', { 'btn-active': activeIndex === 2 }]"
            size="mini"
            @click="switchData(2)"
            >年统计</el-button
          >
        </div>
        <bar-chart :option="barOption2" />
      </div>
      <div class="chart-all-part">
        <div class="btn-container"></div>
        <bar-chart :option="barOption3" />
      </div>
    </div>
  </el-card>
</template>

<script>

import BarChart from '@/components/chart/bar.vue'
import barOption from './chart/bar.js'
import { mapState } from 'vuex'

export default {
  components: {
    BarChart
  },
  data () {
    return {
      page: 1,
      limit: 5,
      tableData: [],
      form: {
        deptId: '',
        date: []
      },
      total: 0,
      activeIndex: 0,
      barOption,
      barOption2: null,
      barOption3: null,
      dataObj: {
        综合治理部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [1, 2, 1, 1, 1, 2, 1, 3]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [4, 5, 8, 8, 9, 10, 13, 17]
          },
          {
            xData: ['2019', '2020', '2021'],
            yData: [74, 94, 116]
          }
        ],
        公共安全部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [1, 1, 2, 0, 1, 2, 1, 1]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [5, 7, 6, 9, 8, 4, 7, 11]
          },
          {
            xData: ['2019', '2020', '2021'],
            yData: [55, 68, 87]
          }
        ],
        公共卫生部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [2, 0, 1, 0, 0, 1, 2, 0]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [6, 5, 9, 4, 8, 7, 6, 9]
          },
          {
            xData: ['2019', '2020', '2021'],
            yData: [45, 60, 78]
          }
        ],
        城市管理部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [1, 0, 0, 2, 1, 0, 1, 0]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [3, 4, 6, 5, 3, 6, 7]
          },
          {
            xData: ['2020', '2021'],
            yData: [55, 67]
          }
        ],
        生态环境部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [1, 0, 2, 0, 0, 1, 1, 0]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [4, 3, 2, 4, 5, 4, 6, 7]
          },
          {
            xData: ['2020', '2021'],
            yData: [44, 62]
          }
        ],
        交通运输部: [
          {
            xData: [
              '12-01',
              '12-02',
              '12-03',
              '12-04',
              '12-05',
              '12-06',
              '12-07',
              '12-08'
            ],
            yData: [0, 2, 0, 3, 1, 0, 1, 0]
          },
          {
            xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yData: [3, 6, 4, 2, 5, 4, 4, 7]
          },
          {
            xData: ['2020', '2021'],
            yData: [42, 63]
          }
        ]
      },
      dataList: [
        {
          xData: [
            '12-01',
            '12-02',
            '12-03',
            '12-04',
            '12-05',
            '12-06',
            '12-07',
            '12-08'
          ],
          yData: [16, 11, 14, 17, 21, 28, 11, 13]
        },
        {
          xData: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          yData: [56, 61, 45, 78, 56, 77, 65, 73]
        },
        {
          xData: [
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020',
            '2021'
          ],
          yData: [690, 711, 691, 746, 701, 989, 891, 1010]
        }
      ],
      selectName: '',
      ablityList: {
        xData: [
          '人脸识别',
          '通用物体和场景识别',
          '物体检测',
          '人脸融合',
          '短语音识别',
          '文本翻译',
          '感情倾向分析',
          '词法分析',
          '视频对比检索',
          '视频封面选取',
          '视频内容分析',
          '通用文字分析',
          '人体关键点识别',
          '公共厕所图纸',
          '水库图层',
          '图像主体检测',
          '地铁站图层',
          '公交车站图层'
        ],
        yData: [
          82, 45, 56, 67, 58, 61, 54, 42, 70, 51, 59, 66, 53, 46, 57, 30, 55, 58
        ]
      }
    }
  },
  computed: {
    ...mapState(['departmentSelects'])
  },
  created () {
    const option = JSON.parse(JSON.stringify(this.barOption))
    option.title.text = '调用次数统计'

    option.color = [
      '#FE934F',
      '#12B2F8',
      '#AD66FC',
      '#48DF6C',
      '#FED74D',
      '#FD4461'
    ]
    this.switchData(0, option)
    if (!this.barOption3) {
      const barOption3 = JSON.parse(JSON.stringify(this.barOption))
      barOption3.title.text = '能力调用排名'
      barOption3.color = [
        '#00FF7F',
        '#12B2F8',
        '#AD66FC',
        '#48DF6C',
        '#FED74D',
        '#FD4461'
      ]
      barOption3.xAxis[0].data = this.ablityList.xData
      barOption3.xAxis[0].axisLabel = {
        rotate: 45,
        textStyle: {
          fontSize: '16'
        }
      }
      barOption3.series[0].data = this.ablityList.yData.sort((a, b) => b - a)
      this.barOption3 = barOption3
    }
  },
  watch: {
    form: {
      immediate: true,
      deep: true,
      handler () {
        this.page = 1
        this.getData()
      }
    }
  },
  methods: {
    currentChange (page) {
      this.page = page
      this.getData()
    },
    getData () {
      if (this.loading) { return }

      this.loading = true
      this.tableData = []
      const params = {
        deptId: this.form.deptId,
        startTime: this.form.date ? this.form.date[0] : '',
        endTime: this.form.date ? this.form.date[1] : '',
        page: this.page,
        limit: this.limit
      }
      this.$http.get('bsabilityrecord/rank', { params }).then(({ data: res }) => {
        this.loading = false
        if (res.code === 0) {
          this.tableData = res.data.list.map((item, index) => ({
            name: item.name,
            rank: (this.page - 1) * this.page + index + 1,
            count: item.count
          }))
          this.total = res.data.total
        }
      })
    },
    switchData (index, option = this.barOption2) {
      this.activeIndex = index
      let obj = {}
      if (this.selectName && this.selectName.length > 0) {
        const list = this.dataObj[this.selectName]
        obj = list[this.activeIndex]
      } else {
        obj = this.dataList[index]
      }
      option.title.text = this.selectName + '调用次数统计'
      option.xAxis[0].data = obj.xData
      option.series[0].data = obj.yData
      if (!this.barOption2) {
        this.barOption2 = option
      }
    },
    barChange (name) {
      this.selectName = name
      const list = this.dataObj[name]
      const obj = list[this.activeIndex]
      const option = this.barOption2
      option.title.text = name + '调用次数统计'
      option.xAxis[0].data = obj.xData
      option.series[0].data = obj.yData
      this.barOption2 = option
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-part {
  position: relative;
  height: 400px;
  width: 48%;
  float: left;
}
.chart-all-part {
  position: relative;
  height: 400px;
  float: left;
  width: 100%;
}
.btn-container {
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 9;
  .btn-active {
    background-color: #3d96ff;
    color: #fff;
  }
  .btn:hover {
    @extend .btn-active;
  }
}
.table-container {
  padding: 10px 0 20px;
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
</style>
